<template>
	<view class="">
		<uv-sticky bgColor="#fff">
			<uv-tabs @click="deptClick" :list="list" lineColor="#ef9f39" :activeStyle="{
			color: '#ef9f39',
			transform: 'scale(1.05)'
    	}"></uv-tabs>
		</uv-sticky>

		<view class="doctors p-10">
			<view class="bg-white doctors_item mb-20" v-for="(item, index) in doctorsList" :key="item.doctorId">
				<uv-row gutter="10">
					<uv-col span="2">
						<img style="width: 100%; height: auto;" src="../../static/home/doctor-portait.png" />
					</uv-col>
					<uv-col span="22">
						<view class="flex align-center" style="align-items: baseline">
							<view class="text-dark mr-10">{{item.doctorName}}</view>
							<view class="font-small">{{item.title}}</view>
						</view>
						<view class="font-small flex align-items-center mb-10 mt-10">
							<view class="mark2">
								{{item.specialization}}
							</view>
						</view>
						<view class="font-22 textBox">
							北京儿童医院
						</view>
					</uv-col>
				</uv-row>
				<view class="description mt-20 mb-10">
					擅长方向: {{item.expertise}}
				</view>
				<view class="flex justify-between align-center font-22">
					<view class="flex align-center">
						<text class="mr-5">0</text> <text>个精品视频</text>
					</view>
					<view class="flex align-center">
						<view class="mr-10">
							<uv-text size="12" type="warning" text="看视频" @click="details(item)"></uv-text>
						</view>
						<view>
							<uv-text size="12" type="warning" text="问医生"></uv-text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view class="text-center p-20" v-if="loading">
				<text>加载中...</text>
			</view>
			<view class="text-center p-20" v-if="noMoreData">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import tip from '@/common/util/tip.js'
	import {
		doctorInfo
	} from "@/common/api/medic/medic.js"

	export default {
		data() {
			return {
				page: 1, // 当前页码
				size: 10, // 每页条数
				doctorsList: [], // 医生列表
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				currentTabKey: '', // 当前选中的 tab 的 key
				list: [{
						name: '眼科',
						key: 'ophthalmology'
					}, {
						name: '营养科',
						key: 'nourishment'
					}, {
						name: '过敏反应科',
						key: 'allergy'
					}, {
						name: '皮肤科',
						key: 'skin'
					}, {
						name: '儿科',
						key: 'dermatology'
					}, {
						name: '新生儿科',
						key: 'newborn'
					}, {
						name: '妇产科',
						key: 'gynecology'
					},
					{
						name: '儿童心理',
						key: 'mind'
					},
					{
						name: '儿童保健科',
						key: 'healthcare'
					},
					{
						name: '呼吸内科',
						key: 'breath'
					},
					{
						name: '口腔科',
						key: 'mouthcavity'
					}
				]
			}
		},
		mounted() {
			// 默认加载第一个 tab 的数据
			this.currentTabKey = this.list[0].key;
			this.loadDoctors();
		},
		methods: {
			// 切换 tab 时触发
			deptClick(item) {
				if (this.currentTabKey === item.key) return; // 如果当前 tab 已经是选中的 tab，则不执行
				this.currentTabKey = item.key; // 更新当前选中的 tab
				this.page = 1; // 重置页码
				this.doctorsList = []; // 清空医生列表
				this.noMoreData = false; // 重置没有更多数据的状态
				this.loadDoctors(); // 加载数据

				// 切换 tab 时滚动到页面顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 滚动动画时长
				});
			},
			// 加载医生数据
			loadDoctors() {
				if (this.loading || this.noMoreData) return; // 如果正在加载或没有更多数据，则不再请求
				this.loading = true;

				doctorInfo({
					page: this.page,
					size: this.size,
					dept: this.currentTabKey // 传递当前选中的科室
				}).then((res) => {
					if (res.content?.length) {
						this.doctorsList = this.doctorsList.concat(res.content); // 将新数据追加到现有数据中
						this.page += 1; // 页码增加
					} else {
						this.noMoreData = true; // 没有更多数据时设置为 true
					}
				}).catch(() => {
					tip.toast('网络异常!');
				}).finally(() => {
					this.loading = false; // 请求结束后重置 loading 状态
				});
			},
			// 跳转到医生详情页
			details(item) {
				uni.navigateTo({
					url: `/detail/doctor/doctor?id=${item.doctorId}`,
				});
			}
		},
		// 监听页面滚动到底部
		onReachBottom() {
			this.loadDoctors(); // 触底时加载更多数据
		}
	}
</script>

<style>
	.doctors_item {
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
		/* 禁止缩小 */
		flex-grow: 0;
		/* 禁止增长 */
	}

	.mark2 {
		display: inline-block;
		border: 1px solid #efefef;
		border-radius: 5px;
		padding: 2px 8px;
		white-space: nowrap;
		text-align: center;
	}

	.description {
		padding: 10px;
		font-size: 24rpx;
		background-color: #efefef;
	}
</style>